<!--医生管理页-->
<template>
  <!-- 新建用户 -->
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size: 20px;">医生管理</span>
    <el-button type="primary" style="float: right;margin-top: 10px;"
               @click="beforeAddDoctor">新建医生
    </el-button>
  </div>
  <!--医生搜索卡片-->
  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="医生搜索">
        <el-input placeholder="输入医生名" style="width: 220px;"
                  v-model="searchDoctorForm.doctor"
                  @keydown.enter.prevent="loadDoctor"></el-input>
      </el-form-item>
      <el-form-item label="医生是否为专家">
        <el-select placeholder="请选择是否为专家的医生" style="width: 220px;"
                   v-model="searchDoctorForm.expert" @change="loadDoctor">
          <el-option label="是专家" value="1"></el-option>
          <el-option label="不是专家" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadDoctor">搜索</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 医生列表卡片 -->
  <el-card style="margin: 20px;">
    <el-table :data="doctorArr">
      <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
      <el-table-column label="医生名" prop="doctor" align="center"></el-table-column>
      <el-table-column label="手机号" prop="phone" align="center"></el-table-column>
      <el-table-column label="性别" prop="gender" align="center"></el-table-column>
      <el-table-column label="现居住址" prop="address" align="center"></el-table-column>
      <el-table-column label="加入时间" prop="createTime" align="center"></el-table-column>
      <el-table-column label="所在科室" prop="department" align="center"></el-table-column>
      <el-table-column label="是否为专家" align="center">
        <template #default="scope">
          <el-switch active-value="1" inactive-value="0" v-model="scope.row.expert"
                     @change="changeStatus(scope.row.id,scope.row.expert)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary"
                     @click="resetPassword(scope.row.id)">密码重置
          </el-button>
          <el-button link type="primary"
                     @click="editDoctor(scope.row.id)">编辑
          </el-button>
          <el-button link type="primary"
                     @click="deleteUser(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      style="width: 1000px;padding: 40px;"
      :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="医生名">
            <el-input placeholder="请输入医生名" v-model="saveDoctorForm.doctor"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input placeholder="请输入手机号" v-model="saveDoctorForm.phone"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="科室">
            <el-input placeholder="请输入先择科室" v-model="saveDoctorForm.department"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄">
            <el-input placeholder="请输入年龄" v-model="saveDoctorForm.age"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="家庭住址">
            <el-input placeholder="请输入现居地址" v-model="saveDoctorForm.address"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证">
            <el-input placeholder="请输入身份证" v-model="saveDoctorForm.cardId"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" v-if="elementDisplay">
        <el-col :span="12">
          <el-form-item label="密码">
            <el-input placeholder="修改密码" v-model="saveDoctorForm.doctorPassword"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="性别">
            <el-radio-group v-model="saveDoctorForm.gender">
              <el-radio border label="男" value="男" style="margin: 0"></el-radio>
              <el-radio border label="女" value="女"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否为专家">
            <el-radio-group v-model="saveDoctorForm.expert">
              <el-radio border label="是" value="1" style="margin: 0;"></el-radio>
              <el-radio border label="否" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="elementDisplay">
          <el-form-item label="是否激活">
            <el-radio-group v-model="saveDoctorForm.status">
              <el-radio border label="是" value="1" style="margin: 0;"></el-radio>
              <el-radio border label="否" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleCloseConfirm">保存</el-button>
    </template>
  </el-dialog>

</template>

<script setup>

/*定义对象来保存用户搜索的条件*/
import {ElMessage, ElMessageBox} from "element-plus";
import axios from "axios";
import qs from "qs";
import {nextTick, onMounted, ref} from "vue";
/*定义对象来保存用户搜索的条件*/
const searchDoctorForm = ref({doctor: "", expert: ""});
/*定义变量控制弹窗是否出现*/
const dialogVisible = ref(false);
/*定义变量用来控制弹窗的标题*/
const dialogTitle = ref("新建用户")
/*控制元素显示*/
const elementDisplay = ref(false);
/*定义对象用来保存医生用户数据*/
const saveDoctorForm = ref({
  doctor: "",
  phone: "",
  department: "",
  age: "",
  gender: "",
  expert: "",
  cardId: "",
  address: "",
  doctorPassword: "",
  status: ""
})
/*定义数组对象来保存请求回来的医生数据*/
const doctorArr = ref([]);
/*获取用户数据*/
const doctor = getUser();
//定义用来保存性别类型的数字
/*const genderTypeArr = ref([])*/
//定义方法对性别类型转文字
/*const genderTypeFormatter = (row,column,cellValue,index)=>{
  if (!genderTypeArr.value){
    return cellValue;
  }
  for (let item of genderTypeArr.value){
    cellValue = item.label;
  }
}*/
/*定义一个加载的方法*/
const loadDoctor = () => {
  let data = qs.stringify(searchDoctorForm.value);
  console.log(data);
  axios.get(BASE_URL + '/v1/admin/doctor/select?' + data)
      .then((response) => {
        if (response.data.code == 2000) {
          doctorArr.value = response.data.data;
          console.log(doctorArr.value);
        } else {
          ElMessage.error(response.data.msg);
        }
      })
}
/*页面加载完立即执行*/
onMounted(()=>{
  loadDoctor();
})
/*定义新建医生账号窗口页面开关控制*/
const beforeAddDoctor = () => {
  dialogVisible.value=true;
  dialogTitle.value = "新建医生账号"
}
/*重置搜索的方法*/
const resetSearch = () => {
  searchDoctorForm.value = {};
  loadDoctor();
}
/*定义修改状态的方法（是否为专家）*/
const changeStatus = (doctorId, expert) => {
  axios.post(BASE_URL + '/v1/admin/updateStatus/' + doctorId + '/' + expert)
      .then((response) => {
        if (response.data.code == 2000) {
          ElMessage.success('修改成功!');
        } else {
          ElMessage.error(response.data.msg);
        }
      })
}
/*定义重置密码的方法*/
const resetPassword = (doctorId) => {
  axios.post(BASE_URL + '/v1/admin/doctor/password/' + doctorId)
      .then((resposne) => {
        if (resposne.data.code == 2000) {
          ElMessage.success('密码重置成功')
        } else {
          ElMessage.error(resposne.data.msg)
        }
      })
}
/*定义编辑的方法*/
const editDoctor = (doctorId) => {
  //弹出窗口加改变窗口名
  dialogVisible.value = true;
  dialogTitle.value = "编辑医生信息";
  //显示隐藏元素
  elementDisplay.value = true;
  axios.get(BASE_URL + '/v1/admin/doctor/select?id='+doctorId)
      .then((response) => {
        if (response.data.code == 2000) {
          console.log(response.data.data[0]);
          //将查询到的医生数据赋值给表单对象
          saveDoctorForm.value = response.data.data[0];
        } else {
          ElMessage.error(response.data.msg)
        }
      })
}
/*定义删除的方法*/
const deleteUser = (doctorId) => {
ElMessageBox.confirm('是否删除该用户','提示',{}).then(()=>{
  axios.post(BASE_URL+'/v1/admin/doctor/delete/'+doctorId)
      .then((response)=>{
        if (response.data.code == 2000){
          ElMessage.success('删除成功')
          loadDoctor();
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}).catch(()=>{})
}
/*定义保存用户的方法*/
const saveDoctor = () => {
  let data = qs.stringify(saveDoctorForm.value)
  axios.post(BASE_URL + '/v1/admin/doctor/add', data)
      .then((response) => {
        if (response.data.code == 2000) {
          /*清空数据*/
          saveDoctorForm.value = {};
          /*刷新表数据*/
          loadDoctor();
        } else {
          ElMessage.error(response.data.msg);
        }
      })
}
/*定义关闭窗口的方法*/
const handleClose = () => {
  ElMessageBox.confirm('确认关闭本窗口？', '提示', {
    type: 'warning'
    //确认会执行的
  }).then(() => {
    dialogVisible.value=false;
    saveDoctorForm.value = {};
    resetForm();
    elementDisplay.value=false;
    //取消会执行的
  }).catch(() => {
  });
};
/*定义确认按钮关闭窗口*/
const handleCloseConfirm = () => {
  ElMessageBox.confirm('确认保存并关闭本窗口？', '提示', {
    type: 'warning'
  }).then(() => {
    saveDoctor();
    dialogVisible.value=false;
    /*清空数据*/
    saveDoctorForm.value = {};
    resetForm();
    elementDisplay.value=false;
  }).catch(() => {

  });
};
const resetForm = async ()=>{
  saveDoctorForm.value={
    doctor: "",
    phone: "",
    department: "",
    age: "",
    gender: "",
    expert: "",
    cardId: "",
    address: "",
    doctorPassword: "",
    status: ""
  };
  /**
   * 等待Vue处理完DOM更新
   */
  await nextTick();
}
</script>


<style scoped>

</style>